<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>黑马一下</title>
    <style>
        #container {
            width: 800px;
            margin: 50px auto;
        }

        .searchContainer {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            position: relative;
        }

        .searchContainer #keyword {
            width: 80%;
            box-sizing: border-box;
            height: 40px;
            border: none;
            padding: 0px;
            padding-left: 10px;
            position: absolute;
            left: 0px;
            top: 0;
            outline: none;
            box-shadow: 1px 1px 10px #888;
        }

        .searchContainer #btn {
            width: 19%;
            box-sizing: border-box;
            height: 40px;
            border: none;
            background-color: skyblue;
            color: white;
            position: absolute;
            left: 480px;
            top: 0;
            box-shadow: 1px 1px 15px skyblue;
            font-weight: bold;
            font-size: 16px;
            outline: none;
        }

        img {
            margin: 0 auto;
            display: block;
        }

        ul {
            list-style: none;
            width: 80%;
            position: absolute;
            top: 40px;
            border: 1px solid #ccc;
            margin: 0px;
            padding: 0px;
        }

        ul li {
            padding-left: 10px;
            height: 24px;
            line-height: 24px;
        }

        .feedback {
            background: #eee;
        }

        a {
            float: right;
            font-size: 12px;
            margin-right: 10px;
            color: #ccc;

        }
    </style>
</head>

<body>
<div id="container">
    <img src="logo.png" alt="">
    <div class="searchContainer">
        <input type="text" id="keyword" placeholder="请输入相关的关键字" autocomplete="off">
        <input type="button" id="btn" value="黑马一下">

        <ul id="list">
            <li>java</li>
            <li>spring</li>
            <li class='feedback'><a href='javascript:;'>反馈</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    let keyWordObj = document.getElementById("keyword");
    keyWordObj.oninput = function () {
        //在此处书写对应的javascript代码
        //给输入框定义value属性(用户输入的值)
        let inputValue = document.getElementById("keyword").value;
        //如果用户输入空字符串，就清空ul列表中的数据
        if (inputValue == "") {
            document.getElementById("list").innerHTML = "";
        } else {
            //如果输入了数据，发送异步请求
            axios.post("/queryServlet", "word="+inputValue)
                .then(resp => {
                    let list = document.getElementById("list");
                    //先清空一下然后重写赋值
                    list.innerHTML="";
                    //获取后端传来的json数据并封装到ul中
                    let arr = resp.data;
                    let content = "";
                    for (let x of arr) {
                        content += `<li>${x.name}</li>`;
                    }
                    content+='<li class=\'feedback\'><a href=\'javascript:;\'>反馈</a></li>';
                    list.innerHTML +=content;
                });
        }

    };

</script>
</body>

</html>